import { Component, OnInit, Input, Output, EventEmitter, ViewEncapsulation, ViewContainerRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'ege-data-table-content',
  templateUrl: './data-table-content.component.html',
  styleUrls: ['./data-table-content.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class DataTableContentComponent implements OnInit {

  _tableData: { [id: string]: any }[] = [];
  _tableColumn: string[];
  _alias: { [key: string]: string } = {};
  _allChecked: boolean = false;
  _indeterminate: boolean = false;
  _displayData: { [id: string]: any }[] = [];
  _loading: boolean = false;
  _loaded: boolean = false;
  _loadError: boolean = false;

  @Output() tableRowMouseover: EventEmitter<any> = new EventEmitter<any>();
  @Output() tableRowMouseout: EventEmitter<any> = new EventEmitter<any>();

  @Input()
  set tableData(value: { [id: string]: any }[]) {
    value = value || [];
    this._tableData = value.map(data => {
      return {...data};
    });
  }

  get tableData(): { [id: string]: any }[] {
    return this._tableData;
  }

  @Input()
  set tableColumn(value: string[]) {
    this._tableColumn = value;
  }

  get tableColumn(): string[] {
    return this._tableColumn;
  }

  @Input()
  set alias(value: { [key: string]: string }) {
    this._alias = value || {};
  }

  get alias(): { [key: string]: string } {
    return this._alias;
  }

  @Input()
  set loading(value: boolean) {
    this._loading = value;
  }

  get loading(): boolean {
    return this._loading;
  }

  @Input()
  set loaded(value: boolean) {
    this._loaded = value;
    if(value) {
      setTimeout(() => {
        this.setContainerWidth();
      }, 0);
    }
  }

  get loaded(): boolean {
    return this._loaded;
  }

  @Input()
  set loadError(value: boolean) {
    this._loadError = value;
  }

  get loadError(): boolean {
    return this._loadError;
  }

  constructor(
    private renderer: Renderer2,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngOnInit() {
    !this.tableColumn && this.initTableHead();
  }

  setContainerWidth(): void {
    const table = this.viewContainerRef.element.nativeElement.querySelector('table');
    const container: HTMLElement = this.viewContainerRef.element.nativeElement.querySelector('.ant-spin-container');
    const width = table.offsetWidth > container.parentElement.offsetWidth ? table.offsetWidth : container.parentElement.offsetWidth;
    this.renderer.setStyle(container, 'width', `${width}px`);
    this.renderer.setStyle(container, 'min-width', `100%`);
  }

  initTableHead(): void {
    let tableColumn: string[] = [];
    if(this.tableData[0]) {
      tableColumn = Object.keys(this.tableData[0]).filter(key => key !== 'FEATURE_ID');
    }
    this._tableColumn = tableColumn;
  }

  _displayDataChange($event) {
    this._displayData = $event;
    this._refreshStatus();
  }

  _refreshStatus() {
    const allChecked = this._displayData.every(value => value.disabled || value.checked);
    const allUnChecked = this._displayData.every(value => value.disabled || !value.checked);
    this._allChecked = allChecked;
    this._indeterminate = (!allChecked) && (!allUnChecked);
  }

  _checkAll(value) {
    if (value) {
      this._displayData.forEach(data => {
        if (!data.disabled) {
          data.checked = true;
        }
      });
    } else {
      this._displayData.forEach(data => data.checked = false);
    }
    this._refreshStatus();
  }

  onMouseOver(data: any): void {
    this.tableRowMouseover.emit(data);
  }

  onMouseOut(data: any): void {
    this.tableRowMouseout.emit(data);
  }

}
